<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <base href="/ExamMVC/">
    <meta charset="UTF-8">
    <title>在线考试系统</title>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        *{padding: 0px;margin: 0px}
        #app{
            width:100%;
            height: 50px;
            background-color: #435c74;
            line-height: 50px;
            display: inline-block;
        }
        h1{
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }
        #main{
            width: 100%;
            height: 710px;
            /*background-color: #c3d8e9;*/
        }
        #app a {
            float: left;
            color: white;
            font-size: 20px;
            /*去除超链接的下划线*/
            text-decoration: none;
            padding: 2px 10px;
            line-height: 30px;
        }
        #app .but1,.but2 {
            float: right;
            border: 2px solid rgb(255, 238, 0);
            /*使元素的角变圆*/
            border-radius: 25px;
            padding: 6px 25px;
            margin: 0px 10px;
            cursor: pointer;
            display: inline-block;
        }
        #app .but1,but2 > a {
            color: rgb(255, 238, 0);
        }
        #app .but1 {
            margin-right: 60px;
        }
        #app .but1:hover {
            background-color: rgb(255, 238, 0);
        }
        #app .but2:hover {
            background-color: rgb(255, 238, 0);
        }
        #app .but2:hover a {
            color: rgb(180, 81, 81);
        }
        #main .choies{
            width: 30%;
            height: 300px;
            background-color: #d4e1f1;
            display: inline-block;
            text-align: center;
            line-height:300px;
            margin: 100px;
            /*display: none;*/
        }
        #main .choies button {
            width: 200px;
            height: 150px;
            font-size: 30px;
            border: none;
            cursor: pointer;
        }
        #main .choies button:hover {
            background-color: #414d61;
            color: yellow;
            font-size: 35px;
        }
        #main .paperPage{
            position: absolute;
            top: 120px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }
        #main .paperPage table th,td{
            width: 180px;
            height: 40px;
            border: 2px solid #c3d8e9;
            background-color: #c1d2e2;
        }
        #main .paperPage table td span{
            background-color: #c3d8e9;
            padding: 2px 8px;
            border-radius: 2px;
            cursor: pointer;
        }
        #main .paperPage table td span:hover{
            background-color: #c1d2e2;
            color: yellow;
        }
        #main .paperPage:nth-child(3){display: none;}
        #main .paperPage:nth-child(4){display: none;}
        #main #problem{
            position: absolute;
            top: 150px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            background-color: #c3d8e9;
            display: none;
        }
        #main #problem ul{
            list-style: none;
        }
        #main #problem li{
            text-align: left;
            padding: 3px;
        }
        #main #problem button{
            background: #c3d8e9;
            border: none;
            font-size: 18px;
            margin: 20px 10px 10px;
        }
        #main #problem button:hover{
            background-color: green;
            color: white;
        }
        #main #mark{
            position: absolute;
            top:80px;
            left: 50%;
            transform: translateX(-50%);
            display: none;
        }
        #main #mark table th,td{
            background-color: #c3d8e9;
            width: 170px;
            height: 33px;
            text-align: center;
            line-height: 33px;
        }
        #main #problem input[type="button"] {
            color: green;
            font-size: 18px;
            width: 40px;
            height: 28px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 onclick="paperPage0()">{{title}}</h1>
        <div class="but1" @click="userExit">
            <a>{{exit}}</a>
        </div>
        <div class="but2">
            <a>{{account}}</a>
        </div>
    </div>
    <div id="main">
        <div class="choies">
            <button onclick="paperPage1()" @click="queryByEid">开始考试</button>
        </div>
        <div class="choies">
            <button onclick="paperPage2()">查看分数</button>
        </div>
        <div class="paperPage">
            <table>
                <tr><th>试卷编号</th><th>课程名称</th><th>考试时间(分)</th><th>操作</th></tr>
                <tr v-for="paper in paperList">
                    <td>{{paper.pid}}</td>
                    <td>{{paper.em.pname}}</td>
                    <td>{{paper.em.examtime}}</td>
                    <td><span @click="querySubject(paper.pid)">开始</span></td>
                </tr>
            </table>
        </div>
        <div class="paperPage">
            <table>
                <tr><th>试卷编号</th><th>课程名称</th><th>考试时间(分)</th><th>操作</th></tr>
                <tr v-for="paper in paperList">
                    <td>{{paper.pid}}</td>
                    <td>{{paper.em.pname}}</td>
                    <td>{{paper.em.examtime}}</td>
                    <td><span @click="mark">查看</span></td>
                </tr>
            </table>
        </div>
        <div id="problem">
            <div>
<!--                <span class="timeDisplay">{{timeShow}}</span>-->
<!--                <input type="button" v-model="butName" @click="start"/>-->
            </div>
            <ul v-for="(sub,index) in subjectList">
                <li>{{sub.scontent}}</li>
                <li><input type="radio" v-bind:name="index" :value="sub.sa">{{sub.sa}}</li>
                <li><input type="radio" v-bind:name="index" :value="sub.sb">{{sub.sb}}</li>
                <li v-if="sub.sc!=''"><input type="radio" v-bind:name="index" :value="sub.sc">{{sub.sc}}</li>
                <li v-else></li>
                <li v-if="sub.sd!=''"><input type="radio" v-bind:name="index" :value="sub.sd">{{sub.sd}}</li>
                <li v-else></li>
                <li v-if="index!=7"><button>{{timeShow}}</button><input type="button" v-model="butName" @click="start"/></li>
                <li v-else><button @click="score">提交</button></li>
            </ul>
        </div>
        <div id="mark">
            <table>
                <tr><th>课程名称</th><th>总分</th><th>成绩</th><th>考试时间</th></tr>
                <tr v-for="usermark in userMarks">
                    <td>{{usermark.pname}}</td>
                    <td>{{usermark.zscore}}</td>
                    <td>{{usermark.score}}</td>
                    <td>{{usermark.tjtime}}</td>
                </tr>
            </table>
        </div>
    </div>

    <script>
        var vm1 = new Vue({
            el:"#app",
            data:{
                title:"在线考试系统",
                account: "用户账号",
                exit:"退出",
                userid:"",
                classid:"",
            },
            methods:{
                userExit:function (){
                    axios.get("userExit").then(result=>{
                        location.href = result.data;
                    })
                },
                repage:function (){
                    axios.get("rePage").then(result=>{
                        this.account = result.data.account;
                        this.userid = result.data.userid;
                        this.classid = result.data.classid;
                    })
                }
            },
            mounted:function (){
                this.repage();
            }
        });
        var vm2 = new Vue({
            el: "#main",
            data: {
                paperList: [],
                subjectList: [],
                // 正确答案
                subjectkets:[],
                //学生答案
                studentKets:[],
                //用户成绩
                userMarks:[],
                eid:"",
                pname:"",
                timeCode:null,
                timeNum:5400,
                butName:"开始"
            },
            methods:{
                //获取所有考试
                queryAllExam:function(){
                    axios.get("queryAllExam").then(result =>{
                        this.paperList = result.data;
                        if (this.paperList.length!==0){
                            for (var i=0; i<this.paperList.length;i++){
                                this.eid = this.paperList[i].eid;
                            }
                        }
                    })
                },
                //eid获取考试
                queryByEid:function (){
                    axios.get("queryByEId",{
                        params: {
                            eid:this.eid,
                        }
                    }).then(result =>{
                        this.pname = result.data.pname;

                    })
                    // console.log(this.pname);
                },
                //获取考试题
                querySubject:function(pid){
                    this.queryByEid();
                    $(".paperPage").hide();
                    $("#problem").show();
                    axios.get("queryByPid",{
                        params:{
                            pid:pid,
                        }
                    }).then(result =>{
                        this.subjectList = result.data;
                        for(var i=0;i<this.subjectList.length;i++){
                            this.subjectkets.push(this.subjectList[i].skety);
                        }
                        // console.log(this.subjectkets);
                    });
                },
                //获取学生选择答案
                nameKety:function (){
                    var temp = $('#problem input[type="radio"]');
                    for(var i=0; i<temp.length; i++){
                        if (temp[i].checked){
                            let li = temp[i].value;
                            this.studentKets.push(li);
                        }
                    }
                    // console.log(this.studentKets)
                },
                //判断分数
                score: function(){
                    this.queryByEid()
                    this.nameKety()
                    var right_number = 0;//答对的题数;
                    for(let i = 0; i < 8;i++) {
                        let daan = this.subjectList[i].skety;
                        let zuoda = this.studentKets[i];
                        if (daan === zuoda) {
                            right_number = right_number+1;
                            // console.log(right_number);
                        }
                    }
                    // console.log(right_number);
                    this.addScore(right_number);
                    $("#problem").hide();
                    $(".choies").show();
                },
                //考试成绩写入数据库
                addScore:function (number){
                    axios.get("addScore",{
                        params: {
                            userid: vm1.userid,
                            classid: vm1.classid,
                            eid: this.eid,
                            pname: this.pname,
                            zscore: "80",
                            score: number,
                        }
                    }).then(result => {
                        if (result.data==="OK"){
                            alert("提交Success!")
                        }else{
                            alert("提交失败.")
                        }
                    })
                },
                //查看学生成绩
                mark:function (){
                    $(".paperPage").hide();
                    axios.get("queryByUserid",{
                        params: {
                            userid: vm1.userid,
                        }
                    }).then(result =>{
                        for (var i=0; i<result.data.length;i++){
                            result.data[i].tjtime = format(result.data[i].tjtime)
                        }
                        this.userMarks = result.data;
                    });
                    $("#mark").show();
                },
                //定时器开关
                start:function(){
                    if(this.butName == "开始"){
                        this.butName = "停止";
                        this.timeCode = setInterval(function(){
                            vm2.timeNum--;
                        },1000)
                    }else{
                        this.butName = "开始";
                        clearInterval(this.timeCode);
                    }
                },
            },
            computed:{
                //时间显示
                timeShow:function(){
                    let num = this.timeNum;
                    if(num==0){
                        clearInterval(this.timeCode);
                        this.butName = "开始";
                        return "结束";
                    }
                    let result = "";
                    if(num>=3600){
                        result += Math.floor(num/3600)+"时";
                        num %= 3600;
                    }
                    if(num>=60){
                        result += Math.floor(num/60)+"分";
                        num %= 60;
                    }
                    result += num+"秒";
                    return result;
                }
            },
            mounted:function (){
                this.queryAllExam();
            }
        });

        /**
         * 单选框切换
         */
        $(":radio").click(function () {
            var r = $(this).attr("name");
            $(":radio[name=" + r + "]:not(:checked)").attr("tag", 0);
            if ($(this).attr("tag") == 1) {
                $(this).attr("checked", false);
                $(this).attr("tag", 0);
            }
            else {
                $(this).attr("tag",1);
            }
        });
        /**
         * 页面切换
         */
        function paperPage0(){
            $(".paperPage:nth-child(3)").hide();
            $(".paperPage:nth-child(4)").hide();
            $(".choies").show();
            $("#problem").hide();
            $("#mark").hide();

        }
        function paperPage1(){
            $(".paperPage:nth-child(3)").show();
            $(".paperPage:nth-child(4)").hide();
            $(".choies").hide();
        }
        function paperPage2(){
            $(".paperPage:nth-child(3)").hide();
            $(".paperPage:nth-child(4)").show();
            $(".choies").hide();
        }

        /**
         * 时间戳转换成日期
         * @param shijianchuo
         * @returns {string}
         */
        function add0(m){return m<10?'0'+m:m }
        function format(dateneedle){
            var time = new Date(dateneedle);
            var y = time.getFullYear();
            var m = time.getMonth()+1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
        }
    </script>
</body>
</html>